<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3"><el-input v-model="form.schemes_number" placeholder="请输入编号" size="small"></el-input></el-col>
      <el-col :span="3"><el-input v-model="form.schemes_title" placeholder="请输入方案名称" size="small"></el-input></el-col>
      <el-col :span="4">
        <el-select v-model="form.crisis_type" placeholder="请选择危机类别" size="small">
          <el-option v-for="item in this.optionList.crisis_type" :key="item.id" :label="item.title" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="form.crisis_degree" placeholder="请选择危机程度" size="small">
          <el-option v-for="item in this.optionList.crisis_degree" :key="item.id" :label="item.title" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="form.influence_range" placeholder="请选择影响范围" size="small">
          <el-option v-for="item in this.optionList.influence_range" :key="item.id" :label="item.title" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="form.site_conditions" placeholder="请选择涉事情况" size="small">
          <el-option v-for="item in this.optionList.site_conditions" :key="item.id" :label="item.title" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <el-row class="btnBox">
      <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addPlan()">添加方案</el-button></el-col>
    </el-row>
    <div class="table">
      <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="operation" @handleSelectionChange="handleSelectionChange"></simple-table>
    </div>
    <div class="page">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </div>
  </div>
</template>
<script>
import simpleTable from '@/components/table.vue'
import {APICRISISGETSCHEMESYSTEMLIST, APICRISISGETSCHEMELIST} from '@/common/api.js'
export default {
  components: {
    simpleTable
  },
  data () {
    return {
      form: {
        schemes_number: '',
        schemes_title: '',
        crisis_type: '',
        crisis_degree: '',
        influence_range: ''
      },
      optionList: {},
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: true,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'schemes_number', name: '编号'},
          {id: 'schemes_title', name: '方案名称'},
          {id: 'crisis_type', name: '危机类别'},
          {id: 'crisis_degree', name: '危机程度'},
          {id: 'influence_range', name: '危机事件影响范围'},
          {id: 'site_conditions', name: '现场涉事情况'},
          {id: 'operation', name: '操作', list: [{id: 'edit', name: '编辑'}]}
        ]
      },
      tableData: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.selectFn()
    this.tableListFn()
  },
  methods: {
    selectFn () {
      APICRISISGETSCHEMESYSTEMLIST().then((res) => {
        this.optionList = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableListFn()
    },
    tableListFn () {
      this.form.page = this.page
      APICRISISGETSCHEMELIST(this.form).then((res) => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
        } else {
          this.tableData = []
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    operation (val) {
      if (val.id === 'edit') {
        this.$router.push({path: '/crisisEditPlan', query: {id: val.rows.id}})
      }
    },
    handleSelectionChange (val) {
      this.onSelectList = val.val
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableListFn()
    },
    addPlan () {
      this.$router.push({path: '/crisisAddPlan'})
    }
  }
}
</script>
